import React, { Component } from "react";
import { Card, Button, Icon, Table, message, Modal } from "antd";

import LinkButton from "../../components/link-button";
import { reqCategorys, reqAddCategory, reqUpdateCategory } from '../../api'
import AddForm from './add-form'
import UpdateForm from './update-form'

// 商品分类

export default class Category extends Component {
    state = {
        loading: false, // loading 开关 发请求开启
        showStatus: 0, // 控制2个更新或者添加的显示， 0: 不显示， 1: 显示添加, 2: 显示更新
        categorys: [], // 一级分类列表
        subCategorys: [], // 二级分类列表
        parentId: '0', // 当前需要显示的分类列表的 parentId
        parentName: '', // 当前需要显示的分类列表的名称
    };

    // 4 取消 更新或者添加分类的对话框
    handleCancel = () => {
         // 清除输入数据
         this.form.resetFields();
        //  隐藏确认框
        this.setState({
            showStatus: 0
        });
    }

    // 4 显示添加确认框
    showAdd = () => {
        this.setState({
            showStatus: 1
        });
    }

    // 4 显示更新分类确认框
    showUpdate = (category) => {
        // console.log('category = ' + JSON.stringify(category));

        // end 保存分类对象
        this.category = category;

        // 更新状态
        this.setState({
            showStatus: 2
        });
    }

    // 4 添加分类
    addCategory = () => {

        this.form.validateFields(async (err, values) => {
            // 进行表单验证
            if(!err) {
                // 隐藏确认框
                this.setState({
                    showStatus: 0
                });

                // 收集数据并
                // const {parentId, categoryName} = this.form.getFieldsValue();
                const {parentId, categoryName} = values;

                // 清除输入数据
                this.form.resetFields();

                // 提交添加分类请求
                const result = await reqAddCategory(parentId, categoryName);
            
                if(result.status === 0) {
                    // 添加的分类就是分类当前分类列表下的分类
                    if(parentId === this.state.parentId) { // 重新获取当前分类列表显示
                        this.getCategorys();
                    }else if(parentId === '0') { // 在二级分类列表项下添加一级分类，重新获取一级分类列表，但是不需要显示一级分类列表
                        this.getCategorys('0');
                    }

                }
            }else {
                
            }
        })
    }

    // 4 更新分类
    updateCategory = () => {
        // 表单验证
        this.form.validateFields(async (err, values) => {
            if(!err) {
                // 1 隐藏确认框
                this.setState({
                    showStatus: 0
                });
                // 2 发请求更新列表
                // 2.1 准备数据
                const categoryId = this.category._id;
                // const categoryName = this.form.getFieldValue('categoryName');
                const {categoryName} = values;

                // 清除输入数据
                this.form.resetFields();

                // 2.2 发请求
                const result = await reqUpdateCategory(categoryId, categoryName);
                if(result.status === 0) {
                    // 3 重新显示列表
                    this.getCategorys();
                }
            }  
        })
        

    }

    // 初始化 table 列的数据
    initColumns = () => {
        this.columns = [
            {
                title: " 分类名称",
                dataIndex: "name", // 显示数据对应的属性名
            },
            {
                title: " 操作",
                width: 300,
                render: (category) => ( // 返回需要显示的界面标签
                    <span>
                        <LinkButton onClick={() => this.showUpdate(category)}>修改分类</LinkButton>&nbsp;&nbsp;&nbsp;
                        {
                            this.state.parentId === '0' ? <LinkButton onClick={() => this.showSubCategorys(category)}>查看子分类</LinkButton> : null
                        }
                    </span>
                )
            },
        ];
    }

    // 异步获取一级或者二级分类列表显示
    // parentId参数：如果没有指定根据状态中的 parentId 请求， 如果指定了根据指定的请求
    getCategorys = async (parentId) => {

        // 发请求前，显示 loading
        this.setState({loading: true});

        // 获取需要请求的分类级别
        parentId = parentId || this.state.parentId;

        // 发异步 ajax 请求获取数据
        const result =  await reqCategorys(parentId);
        // console.log('result = ' + JSON.stringify(result));

        // 发请求后，隐藏 loading 
        this.setState({loading: false});

        if(result.status === 0) {
            // 取去分类列表数组(可能是一级也可能是二级)
            const categorys =  result.data;
            // console.log('data = ' + JSON.stringify(categorys));
            if(parentId === '0') {
                // 更新一级分类列表状态
                this.setState({
                    categorys: categorys
                });
            }else {
                // 更新二级分类列表状态
                this.setState({
                    subCategorys: categorys
                });
            }
        }else {
            message.error('获取分类列表失败');
        }
    }

    // 3 显示指定的一级分类列表的二级列表
    showSubCategorys = (category) => {
        // console.log('category  = ' + JSON.stringify(category));
        this.setState({
            parentId: category._id,
            parentName: category.name
        }, () => { // 在重新 render() 后执行
            // console.log('name = ' + JSON.stringify(this.state))
            // console.log('parentId = ', this.state.parentId);
            // 获取二级分类列表显示
            this.getCategorys();
        })

        // console.log('parentId = ', this.state.parentId);
        // // 获取二级分类列表显示
        // this.getCategorys();
    }

    // 3 显示一级分类列表
    showCategorys = () => {
        this.setState({
            parentId: '0',
            parentName: '',
            subCategorys: []
        });
    }


    // 1 为第一次 reder() 准备数据，同步
    UNSAFE_componentWillMount() {
        this.initColumns();
    }

    // 2 发 ajax 请求
    componentDidMount() {
        // 获取一级分类列表显示
        this.getCategorys();
    }

    render() {

        // 读取状态数据
        const { categorys, subCategorys, parentId, parentName, loading, showStatus } = this.state;

        // 读取指定的分类
        const category = this.category || {}; // 如果还没有为空

        // console.log('category = ' + JSON.stringify(category));
        
        // card 的左侧
        const title = parentId === '0' ? '一级分类列表' : (
            <span>
                {/* 显示一级分类列表 */}
                <LinkButton onClick={this.showCategorys}>一级分类列表</LinkButton>
                <Icon type='arrow-right'></Icon>
                <span style={{marginLeft: 5}}>{parentName}</span>
            </span>
        );
        // card 的右侧
        const extra = (<Button type="primary" onClick={this.showAdd}><Icon type="plus" />添加</Button>);

        return (
            <Card title={title} extra={extra}>
                <Table 
                rowKey='_id'
                loading={loading}
                dataSource={parentId === '0' ? categorys : subCategorys} 
                columns={this.columns}
                pagination={{defaultPageSize: 5, showQuickJumper: true}}
                />
                <Modal
                    title="添加分类"
                    visible={showStatus === 1}
                    onOk={this.addCategory}
                    onCancel={this.handleCancel}
                    >
                    <AddForm 
                        categorys={categorys} 
                        parentId={parentId} 
                        setForm = {(form) => {this.form = form}}
                    />
                </Modal>

                <Modal
                    title="更新分类"
                    visible={showStatus === 2}
                    onOk={this.updateCategory}
                    onCancel={this.handleCancel}
                    >
                    <UpdateForm categoryName={category.name} setForm = {(form) => {this.form = form}}/>
                </Modal>
            </Card>
        );
    }
}
